@import '../../sass/base.scss';

header{
    min-width: 1200px;
    position: relative;
    z-index: 99;
    .header-1{
        //padding: 0 30px;
        //background-color: #323232;
        //height: 52px;
        //line-height: 52px;
        //color: white;
        background-color: #e5e5e5;
        color: #4c4c4c;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        width: 1200px;
        margin: 0 auto;
        a{
            color: white;
            &:hover{
                color: $blue;
            }
        }
        div:nth-of-type(1){
            span:nth-of-type(1){
                display: inline-block;
            }
            span:nth-of-type(2){
                display: inline-block;
                margin-left: 70px;
            }
        }
        div:nth-of-type(2){
            //height: 52px;
            span{
                display: inline-block;
                margin: 0 10px;
            }
            i{
                font-size: 23px;
                vertical-align: middle;
                display: inline-block;
                margin: 0 6px;
                position: relative;
                &:hover{
                    span{
                        display: inline-block;
                    }
                }
                span{
                    display: none;
                    position: absolute;
                    top: 100%;
                    left: 0;
                    transform: translateX(-50%);
                    z-index: 10;
                    background-color: white;
                    padding: 10px;
                    box-shadow: 0 10px 10px rgba(0,0,0,0.2);
                    width: 80px;
                    height: 80px;
                    img{
                        width: 80px;
                        height: 80px;
                    }
                    &:after{
                        position: absolute;
                        top: -20px;
                        left: 50%;
                        transform: translateX(-50%);
                        content: '';
                        border: 10px solid transparent;
                        border-bottom: 10px solid white;
                    }
                }
            }
            i:before{
                background-color: white;
                border-radius: 100%;
            }
            .icon-iconfontweixin{
                color: #3eb135;
                position: relative;
            }
            .icon-weibo{
                color: #df4d69;
            }
        }
    }

    .header-2{
        height: 40px;
        line-height: 40px;
        width: 1200px;
        margin: 0 auto;
        .logo{
            line-height: 0;
            img{
                height: 40px;
            }
        }
        .nav{
            margin-left: 40px;
            li{
                float: left;
                a{
                    color: $l-word;
                    display: inline-block;
                    margin: 0 15px;
                    font-size: 16px;
                    &:hover{
                        color: $blue;
                    }
                }
            }
        }
        .login{
            a{
                color: $l-word;
                display: inline-block;
                margin: 0 17px;
            }
        }
    }
}